<template>
  <div class="m-content dailyDirectPassRate">
    <ul class="progress-box">
      <li v-for="c in list" :key="c.title">
        <el-progress type="circle" :width="c.width || 120" :stroke-width="c.strokeWidth || 12" stroke-linecap="butt" :color="colors" :percentage="c.value">
          <template #default="{ percentage }">
            <span class="percentage-value">{{ Number(percentage).toFixed(2) }}%</span>
          </template>
        </el-progress>

        <div class="title">{{ c.title }}</div>
      </li>
    </ul>
    
  </div>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'
// import top10Echart from '@/views/WarehouseBoard/components/top10Echart/index.vue'

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]
// // 齐套率
// const moRate = ref(0)
// // 及时率
// const timelyIssuanceRate = ref(0)
const list = ref([
  { title: "每日综合OEE", width: 134, strokeWidth: 36, value: 0 },
  { title: "线体综合OEE（近30日）", width: 134, strokeWidth: 36, value: 0 },
])

const getData = async () => {
  // try {
  //   const res = await http.get('/v1/kanban/GetAssembleAnalysisRateReport')
  //   moRate.value = res.moRate
  //   timelyIssuanceRate.value = res.timelyIssuanceRate
  // } catch (e) {
  //   console.error(e)
  // }

  list.value = [
    { title: "每日综合OEE", width: 134, strokeWidth: 30, value: 98.4 },
    { title: "线体综合OEE（近30日）", width: 134, strokeWidth: 30, value: 94.3 },
  ]
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
// .material-matching {
//   ::v-deep(.m-box__body) {
//     .dv-border-box-7 {
//       .border-box-content {
//         .m-content {
//           height: 100%;
//           display: flex;
//           align-items: center;
//           justify-content: space-around;
//         }
//       }
//     }
//   }
// }

// .percentage-value {
//   display: block;
//   margin-top: 10px;
//   font-size: 32px;
//   color: #fff;
// }
// .percentage-label {
//   display: block;
//   margin-top: 10px;
//   font-size: 20px;
//   color: #fff;
// }
.dailyDirectPassRate {
  height: 100%;
  overflow: auto;
  ul.progress-box {
    height: 100%;
    display: flex;
    align-items: center;
    li {
      overflow: hidden;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-progress {
        .el-progress__text {
          span {
            font-size: 20px;
            color: #FFF;
          }
        }
      }
      .title {
        font-size: 24px;
        padding-top: 5px;
      }
    }
  }
}
</style>
